<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>商城首页</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        .container { max-width: 1200px; margin: 0 auto; padding: 16px; }
        .card-img { width: 100%; height: 180px; object-fit: cover; }
        .banner { border-radius: 8px; overflow: hidden; }
        .search-bar { display:flex; gap:8px; align-items:center; }
    </style>
</head>
<body>
<div id="app" class="container">
    <el-row :gutter="12" align="middle">
        <el-col :span="6"><el-text tag="b" size="large">Online Mall</el-text></el-col>
        <el-col :span="12">
            <div class="search-bar">
                <el-input v-model="keyword" placeholder="搜索商品关键字" @keyup.enter.native="toSearch" clearable></el-input>
                <el-button type="primary" @click="toSearch">搜索</el-button>
            </div>
        </el-col>
        <el-col :span="6" style="text-align:right;">
            <el-space>
                <el-button text @click="go('/orders')">我的订单</el-button>
                <el-button text @click="go('/cart')">购物车</el-button>
                <el-button type="primary" @click="go('/login')">登录</el-button>
            </el-space>
        </el-col>
    </el-row>

    <el-row :gutter="12" style="margin-top:12px;">
        <el-col :span="16">
            <el-carousel height="260px" class="banner" indicator-position="outside">
                <el-carousel-item v-for="(img, i) in banners" :key="i">
                    <img :src="img" style="width:100%;height:260px;object-fit:cover;" />
                </el-carousel-item>
            </el-carousel>
        </el-col>
        <el-col :span="8">
            <el-card shadow="hover" style="height:260px;">
                <template #header><div>快捷入口</div></template>
                <el-space direction="vertical" alignment="stretch" style="width:100%;">
                    <el-button type="primary" @click="go('/search')">全部商品</el-button>
                    <el-button @click="go('/orders')">我的订单</el-button>
                    <el-button @click="go('/pay/select')">支付演示</el-button>
                </el-space>
            </el-card>
        </el-col>
    </el-row>

    <el-card style="margin-top:16px;" shadow="never">
        <template #header>
            <div style="display:flex;justify-content:space-between;align-items:center;">
                <div>
                    <el-text tag="b">精选商品</el-text>
                    <el-space style="margin-left:12px;">
                        <el-check-tag v-for="c in categories" :key="c" :checked="activeCat===c" @change="()=>activeCat=c">{{c}}</el-check-tag>
                    </el-space>
                </div>
                <el-button text @click="go('/search')">查看更多</el-button>
            </div>
        </template>

        <el-row :gutter="16">
        <el-col :span="6" v-for="p in products" :key="p.id" style="margin-bottom:16px;">
            <el-card shadow="hover">
                <img class="card-img" :src="p.coverImg" @click="go('/product/' + p.id)" />
                <div style="padding-top:8px;">
                    <div>{{p.name}}</div>
                    <el-text type="danger" tag="b">¥{{p.price}}</el-text>
                    <div style="margin-top:8px;">
                        <el-button size="small" type="primary" @click="addToCart(p.id)">加入购物车</el-button>
                        <el-button size="small" @click="go('/product/' + p.id)">查看</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
        </el-row>
    </el-card>

    <el-row :gutter="16" style="margin-top:16px;">
        <el-col :span="8">
            <el-card shadow="never">
                <template #header><el-text tag="b">热销</el-text></template>
                <el-space wrap>
                    <el-tag v-for="p in hot" :key="p.id" type="danger" effect="plain" @click="go('/product/' + p.id)">{{p.name}}</el-tag>
                </el-space>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card shadow="never">
                <template #header><el-text tag="b">新品</el-text></template>
                <el-space wrap>
                    <el-tag v-for="p in news" :key="p.id" type="success" effect="plain" @click="go('/product/' + p.id)">{{p.name}}</el-tag>
                </el-space>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card shadow="never">
                <template #header><el-text tag="b">推荐</el-text></template>
                <el-space wrap>
                    <el-tag v-for="p in reco" :key="p.id" type="warning" effect="plain" @click="go('/product/' + p.id)">{{p.name}}</el-tag>
                </el-space>
            </el-card>
        </el-col>
    </el-row>
</div>

<script>
const { createApp, onMounted, ref } = Vue
createApp({
    setup(){
        const products = ref([])
        const keyword = ref('')
        const banners = ref([
            'https://via.placeholder.com/1200x260/1677ff/ffffff?text=Banner+1',
            'https://via.placeholder.com/1200x260/13c2c2/ffffff?text=Banner+2',
            'https://via.placeholder.com/1200x260/ff4d4f/ffffff?text=Banner+3'
        ])
        const categories = ref(['热销','新品','推荐'])
        const activeCat = ref('热销')
        const addToCart = (id)=>{
            const cart = JSON.parse(localStorage.getItem('cart') || '{}')
            cart[id] = (cart[id] || 0) + 1
            localStorage.setItem('cart', JSON.stringify(cart))
            ElementPlus.ElMessage.success('已加入购物车')
        }
        const go = (path)=>{ window.location.href = path }
        const toSearch = ()=>{ const k = keyword.value.trim(); go('/search' + (k? ('?keyword=' + encodeURIComponent(k)) : '')) }
        const hot = ref([]); const news = ref([]); const reco = ref([])
        onMounted(async ()=>{
            products.value = await (await fetch('/api/products')).json()
            hot.value = await (await fetch('/api/products?page=1&size=8&keyword=')).json()
            news.value = await (await fetch('/api/products?page=1&size=8&keyword=')).json()
            reco.value = await (await fetch('/api/products?page=1&size=8&keyword=')).json()
        })
        return { products, addToCart, go, keyword, toSearch, banners, categories, activeCat, hot, news, reco }
    }
}).use(ElementPlus).mount('#app')
</script>
</body>
</html>


